<template>
  <div class="box">
    <VEcharts
      v-if="optsMap"
      autoresize
      :options="optsMap"
      style="width: 100%; height: 100%"
      @click="townClick"
    />
  </div>
</template>
<script>
import VEcharts from '@/components/vecharts';
export default {
  components: {
    VEcharts
  },
  computed: {
    optsMap() {
      const newArr = {
        title: {
          text: '',
          subtext: '',
          sublink: ''
        },
        tooltip: {
          trigger: 'item'
          // formatter: "{b}<br/>{c} (案件数)"
        },
        series: [
          {
            name: '',
            type: 'map',
            mapType: 'xinchang', // 自定义扩展图表类型
            zoom: 1.05,
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: {
                  color: '#ffffff'
                } // 省份标签字体颜色
              },
              emphasis: {
                // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: '#ffffff',
                  areaColor: '#88C2F9',
                  shadowColor: 'rgba(0, 0, 238,.02)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 5
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0, // 间距的宽度
                // borderColor: "#fff", // 区域边框颜色
                areaColor: '#519aec' // 区域颜色
              }
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0169d4'
              }
            },
            // 鼠标移入区域，显示的名称和值
            data: [
              { name: '镜岭镇', value: 1, itemStyle: { normal: { areaColor: '#9ac5ff' }}},
              { name: '回山镇', value: 2, itemStyle: { normal: { areaColor: '#5b8ff9' }}},
              { name: '东茗乡', value: 0, itemStyle: { normal: { areaColor: '#5b8ff9' }}},
              { name: '澄潭街道', value: 0, itemStyle: { normal: { areaColor: '#9ac5ff' }}},
              { name: '城南乡', value: 0, itemStyle: { normal: { areaColor: '#9ac5ff' }}},
              { name: '沃洲镇', value: 0, itemStyle: { normal: { areaColor: '#5b8ff9' }}},
              { name: '七星街道', value: 0, itemStyle: { normal: { areaColor: '#7daaff' }}},
              { name: '南明街道', value: 0, itemStyle: { normal: { areaColor: '#5b8ff9' }}},
              { name: '小将镇', value: 0, itemStyle: { normal: { areaColor: '#7daaff' }}},
              { name: '沙溪镇', value: 0, itemStyle: { normal: { areaColor: '#9ac5ff' }}},
              { name: '儒岙镇', value: 0, itemStyle: { normal: { areaColor: '#7daaff' }}},
              { name: '羽林街道', value: 0, itemStyle: { normal: { areaColor: '#5b8ff9' }}}

            ],
            // 自定义名称映射
            dataRange: {
              x: '-1000 px', // 图例横轴位置
              y: '-1000 px', // 图例纵轴位置
              splitList: [
                { 'name': '镜岭镇', 'value': 1, color: 'red' }

              ]
            }
          }
        ]
      };
      return newArr;
    }
  },
  methods: {
    townClick(e) {
      this.$emit('town-click', e);
    }
  }
};
</script>
<style lang="scss" scoped>
.box{
  width: 100%;
  height: 100%;
}
</style>
